﻿@{
    ViewBag.Title = "Demon2";
    Layout = "~/Views/Shared/_demo.cshtml";
}
<style>
    a { text-decoration: none; outline: none; }
    fieldset { padding: 10px; }
    table { width: 500px; }
    h2 { color: #445566; }
    h3 { color: #336699; font-size: 14px; }
    tfoot td { padding-top: 20px; }
    sub { color: Red; }
    /*common important*/
    .hide { display: none !important; }
    .visible { visibility: hidden !important; }
    /*opacity*/
    .opacity-0 { -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); }
    .opacity-1 { -moz-opacity: .1; opacity: .1; filter: alpha(opacity=10); }
    .opacity-2 { -moz-opacity: .2; opacity: .2; filter: alpha(opacity=20); }
    .opacity-3 { -moz-opacity: .3; opacity: .3; filter: alpha(opacity=30); }
    .opacity-4 { -moz-opacity: .4; opacity: .4; filter: alpha(opacity=40); }
    .opacity-5 { -moz-opacity: .5; opacity: .5; filter: alpha(opacity=50); }
    .opacity-6 { -moz-opacity: .6; opacity: .6; filter: alpha(opacity=60); }
    .opacity-7 { -moz-opacity: .7; opacity: .7; filter: alpha(opacity=70); }
    .opacity-8 { -moz-opacity: .8; opacity: .8; filter: alpha(opacity=80); }
    .opacity-9 { -moz-opacity: .9; opacity: .9; filter: alpha(opacity=90); }
    .opacity-10 { -moz-opacity: 1; opacity: 1; filter: alpha(opacity=100); }
    /*common control*/
    .text-success { color: #0a0 !important; }
    .text-error { color: #db0039 !important; }
    .cui { float: left; border: 5px solid transparent; border-radius: 5px; }
    .cui .tip { color: #aaa; }
    .cui-textbox { border-color: #ccc; }
    .cui-textbox:hover { border-color: #adf; }
    .cui-textbox input { padding: 5px; background-color: #333; border: none; color: #eee; font-size: 14px; cursor: pointer; }
    
    .cui-textarea { border: 5px solid #ccc; }
    .cui-textarea:hover { border-color: #adf; }
    .cui-textarea textarea { padding: 5px; background-color: #333; border: none; color: #eee; font-size: 14px; cursor: pointer; overflow-x: auto; overflow-y: auto; }
    
    .cui-dropdownList { border: 5px solid #ccc; border-radius: 5px; }
    .cui-dropdownList:hover { border-color: #adf; }
    .cui-dropdownList select { padding: 5px; background-color: #333; border: none; color: #eee; font-size: 14px; cursor: pointer; }
    
    .cui-button { border: 5px solid #ccc; border-radius: 5px; min-width: 60px; background-color: #333; }
    .cui-button:hover { border-color: #adf; background-color: #222; }
    .cui-button a { padding: 0 25px; line-height: 30px; height: 30px; border: none; color: #eee; font-size: 14px; cursor: pointer; }
    
    .cui-checkbox input, .cui-checkbox label { line-height: 30px; height: 30px; padding: 0 5px; cursor: pointer; }
    
    .cui-radio input, .cui-radio label { line-height: 30px; height: 30px; padding: 0 5px; cursor: pointer; }
    
    .cui-error { border-color: #d66 !important; }
    /*Right sider*/
    #rightsider { background-color: #333; color: #eee; height: 1000px; width: 500px; border-left: 20px solid #ccc; cursor: pointer; }
</style>
<div id="rightsider" class="opacity-8">
    <ul class="group">
        <li>
            <h1>
                Refer Info</h1>
        </li>
        <li>
            <div class="section">
                <h4>
                    AccountID</h4>
                <label class="text-error" validate_error="AccountID" for="AccountID">
                    &nbsp;</label>
            </div>
        </li>
        <li>
            <div class="section">
                <h4>
                    Password</h4>
                <label class="text-error" validate_error="Password" for="Password">
                    &nbsp;</label>
            </div>
        </li>
        <li>
            <div class="section">
                <h4>
                    Confirm Password</h4>
                <label class="text-error" validate_error="dPassword" for="dPassword">
                    &nbsp;
                </label>
            </div>
        </li>
        <li>
            <div class="section">
                <h4>
                    Phone</h4>
                <label class="text-error" validate_error="Phone" for="Phone">
                    &nbsp;
                </label>
            </div>
        </li>
        <li>
            <div class="section">
                <h4>
                    Email</h4>
                <label class="text-error" validate_error="Email" for="Email">
                    &nbsp;
                </label>
            </div>
        </li>
        <li>
            <div class="section">
                <h4>
                    Frist Name</h4>
                <label class="text-error" validate_error="FristName" for="FristName">
                    &nbsp;
                </label>
            </div>
        </li>
        <li>
            <div class="section">
                <h4>
                    Last Name</h4>
                <label class="text-error" validate_error="LastName" for="LastName">
                    &nbsp;
                </label>
            </div>
        </li>
    </ul>
</div>
<fieldset>
    <table>
        <thead>
            <tr>
                <td>
                    <h2>
                        Registration
                    </h2>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <h3>
                        Account ID<sub>*</sub></h3>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td field="AccountID">
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Password<sub>*</sub></h3>
                </td>
                <td>
                    <h3>
                        Confirm Password<sub>*</sub></h3>
                </td>
            </tr>
            <tr>
                <td field="Password">
                </td>
                <td field="dPassword">
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Phone</h3>
                </td>
                <td>
                    <h3>
                        Email</h3>
                </td>
            </tr>
            <tr>
                <td field="Phone">
                </td>
                <td field="Email">
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Frist Name</h3>
                </td>
                <td>
                    <h3>
                        Last Name</h3>
                </td>
            </tr>
            <tr>
                <td field="FristName">
                </td>
                <td field="LastName">
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td field="submit">
                </td>
            </tr>
        </tfoot>
    </table>
</fieldset>
<script src="@Url.Content("~/Scripts/demo2.js")" type="text/javascript"></script>
